<template>
  <view class="content">
    <view class="top marg-btm10" style="padding-bottom: 5px">
      <text>等待洗澡中</text>
      <text class="green">{{ topData.num || 0 }}只</text>
      <button class="wid100" @click="onWashBatch" type="default" size="mini">一键全洗</button>
    </view>
    <view class="searchRow marg-btm10">
      <view class="wid"> 状态： </view>
      <view class="wid">
        <uni-data-select @change="getData" v-model="status" :localdata="range"></uni-data-select>
      </view>
      <view class="flex1"></view>
    </view>
    <uni-list v-if="topData.list && topData.list.length > 0">
      <uni-list-item v-for="item in topData.list" :key="item.id">
        <!-- 自定义 body -->
        <template v-slot:body>
          <view class="list">
            <view>
              <view>序号：{{ item.id }}</view>
              <view v-if="1 == item.active_state" class="wid">睡眠中</view>
              <view v-else-if="2 == item.active_state" class="wid">已激活</view>
              <view v-else class="wid">未激活</view>
            </view>
            <view>
              <view>已洗次数：{{ item.wash_num }}</view>
              <view class="wid">领养日期：{{ item.claim_time }}</view>
            </view>
            <view>
              <view>上次洗澡时间：{{ item.wash_time }}</view>
              <view>
                <button @click="onWashOne(item.id)" type="default" size="mini">去洗澡</button>
              </view>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <statusTips v-else></statusTips>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getGoodsWash, washOne, washBatch } from '@/api/bgame';
import statusTips from '@/components/statusTips/statusTips.vue';
import { useUserStoreHook } from '@/store/user';
const status = ref(null);
const range = ref([
  { value: 0, text: '全部' },
  { value: 1, text: '睡眠中' },
  { value: 3, text: '未激活' },
]);
const topData = ref({
  num: 0,
  list: [],
});

const getData = async () => {
  uni.showLoading({
    title: '获取数据中...',
    mask: true,
  });
  const res = await getGoodsWash({
    active_state: status.value,
  });
  uni.hideLoading();

  if (1 == res.result) {
    const { num = 0, list = [] } = res.data || {};
    Object.assign(topData.value, {
      num,
      list,
    });
  }
};

const onWashBatch = async () => {
  uni.showLoading({
    title: '清洗中...',
    mask: true,
  });
  const res = await washBatch({});
  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '清洗成功',
      icon: 'none',
    });
    getData();
  } else {
    uni.showToast({
      title: res.msg.msg || '清洗失败',
      mask: true,
      icon: 'error',
    });
  }
};
const onWashOne = async (id: any) => {
  uni.showLoading({
    title: '清洗中...',
    mask: true,
  });
  const res = await washOne({
    id,
  });
  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '清洗成功',
      icon: 'none',
    });
    getData();
  } else {
    uni.showToast({
      title: res.msg.msg || '清洗失败',
      mask: true,
      icon: 'error',
    });
  }
};
onLoad(async (option) => {
  await useUserStoreHook().getSign();
  getData();
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  padding: 8rpx;

  .top {
    background-color: white;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    .green {
      color: green;
    }

    text {
      padding: 6rpx;
    }

    button {
      padding: 0 16rpx;
      color: green;
      border: green 1px solid;
    }
  }
}

.searchRow {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-between; //横向排列，平均分配宽度
  padding-left: 16rpx;
  .flex1 {
    flex: 1;
  }
}

.searchRow .wid {
  width: 80px;
}

.list {
  width: 100%;

  view {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between; //横向排列，平均分配宽度
    height: 60rpx;
    line-height: 60rpx;

    .wid {
      width: 350rpx;
    }

    view {
      button {
        padding: 0 10rpx;
        color: green;
        border: green 1px solid;
      }
    }
  }
}
.wid100 {
  width: 100px;
}
.marg-btm10 {
  margin-bottom: 5px;
}
</style>
